<template>
    <div class="person">
        <h1>watch condition1  watch [basic type] defined by [ref]</h1>
        <h2>当前求和为:{{ sum }}</h2>
        <button @click="changeSum">click me sum +1</button>
    </div>
</template>

<script setup lang="ts" name = 'Person'>
    import { ref,watch } from 'vue';
    //data
    let sum = ref(0)

    //methods
    function changeSum(){
        sum.value+=1
    }

    //watch condition1  watch [basic type] defined by [ref]
    //watch(who,callback function)
    const stopWatch = watch(sum,(newValue,oldValue)=>{
        console.log('sum changed',newValue,oldValue);
        if (newValue>=10)
            stopWatch()
    })
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 10px;
}

li{
    font-size: 20px;
}
</style>